<template>
  <div class="axiom-feature-list-item">
    <!-- 脉冲效果元素 -->
    <div v-if="icon" class="axiom-feature-list-item__pulse"></div>

    <div v-if="icon" class="axiom-feature-list-item__icon">
      <AxiomIcon :name="icon" />
    </div>
    <div class="axiom-feature-list-item__content">
      <div class="axiom-feature-list-item__title">{{ title }}</div>
      <div v-if="description" class="axiom-feature-list-item__description">{{ description }}</div>
      <div v-if="$slots.tags" class="axiom-feature-list-item__tags">
        <slot name="tags"></slot>
      </div>
    </div>
    <div v-if="$slots.actions" class="axiom-feature-list-item__actions">
      <slot name="actions"></slot>
    </div>
    <div v-if="showArrow" class="axiom-feature-list-item__arrow">
      <slot name="arrow">
        <AxiomIcon name="fa-chevron-right" />
      </slot>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import AxiomIcon from './AxiomIcon.vue';
// import { GlobalUtilsMixin } from '@/utils/globalUtils';

export default {
  name: 'AxiomFeatureListItem',
  components: {
    AxiomIcon
  },
  // mixins: [GlobalUtilsMixin],
  props: {
    icon: {
      type: String,
      default: null
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: ''
    },
    showArrow: {
      type: Boolean,
      default: true
    }
  },
  created() {
    // this.$logger.debug('AxiomFeatureListItem 组件初始化', {
    //   icon: this.icon,
    //   title: this.title,
    //   hasDescription: !!this.description
    // });
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-feature-list-item';
</style> 